<template>
  <div class="equ-list">
    <div class="swiper-container mySwiper">
      <div class="swiper-wrapper" ref="domRef">
        <div class="swiper-slide" v-for="item in items" :key="item.name">
          <div
            :class="{
              'swiper-slide-card': true,
              // 1-4的随机数类名
              [`swiper-slide-card-${Math.ceil(Math.random() * 4)}`]: true,
            }"
          >
            <div class="equ-img">
              <img :src="item.equImgUrl" alt="" />
            </div>
            <div class="names">
              <div class="name-cn">
                <span>{{ item.nameCn }}</span>
              </div>
              <div class="name-en">
                <span>{{ item.nameEn }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="info-text">
      <div class="title">{{ items[activeIndexRef || 0].nameCn }}</div>
      <div class="highlight">{{ items[activeIndexRef || 0].nameEn }}</div>
      <p class="desc">
        新的Thermo Scientific Apreo 2 SEM将高性能成像和分析扩展到所有级别的显微镜专业知识。凭借Thermo Scientific ChemiSEM技术这一独特的实时元素成像能力，通过最直观的界面始终可以获得成分信息。
      </p>
      <div class="btn">
        <ButtonView size="lg" @touchstart.stop="() => $router.push('/mobile/device-list')">立即预约</ButtonView>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ButtonView from '@/components/ButtonView.vue';
import Swiper from 'swiper/bundle'
import 'swiper/css/bundle'

import equImgUrl from '@/assets/images/equ-demo.png'

const swiperRef = ref()
const domRef = ref()

const activeIndexRef = ref()

const items = ref([
  {
    nameCn: '扫描电子显微镜',
    nameEn: 'Helios 5 PFIB DualBeam',
    equImgUrl,
  },
  {
    nameCn: '扫描电子显微镜',
    nameEn: 'Volumescope 2 SEM',
    equImgUrl,
  },
  {
    nameCn: '双探扫描电子显微镜',
    nameEn: 'Aquilos 2 Cryo FIB',
    equImgUrl,
  },
  {
    nameCn: '偏光显微镜',
    nameEn: 'Leica DM4 P',
    equImgUrl,
  },
  {
    nameCn: '生物体视显微镜',
    nameEn: 'Leica M125 C',
    equImgUrl,
  },
  {
    nameCn: '设备名称1',
    nameEn: 'Helios 5 PFIB DualBeam',
    equImgUrl,
  },
  {
    nameCn: '设备名称2',
    nameEn: 'Volumescope 2 SEM',
    equImgUrl,
  },
  {
    nameCn: '设备名称3',
    nameEn: 'Helios 5 PFIB DualBeam',
    equImgUrl,
  },
  {
    nameCn: '设备名称4',
    nameEn: 'Volumescope 2 SEM',
    equImgUrl,
  },
  {
    nameCn: '设备名称5',
    nameEn: 'Helios 5 PFIB DualBeam',
    equImgUrl,
  },
])

onMounted(() => {
  swiperRef.value = new Swiper('.equ-list .mySwiper', {
    loop: true,
    slidesPerView : 2,
    centeredSlides: true,
    spaceBetween: 6,
    initialSlide: 1,
    autoplay: {
      delay: 5000,
    },
    speed: 1200,
    // navigation: {
    //   nextEl: '.equ-list .swiper-button-next',
    //   prevEl: '.equ-list .swiper-button-prev',
    // },
  })
})
</script>

<style scoped lang="scss">
.equ-list {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0 auto;
  .swiper-container {
    width: 100%;
    height: dpi(56rem);
    overflow: hidden;
    .swiper-slide {
      @include addwh(38rem, 41rem);

      &-card {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;

        &-1 {
          background: url('~@/assets/images/equ-bg-1.jpg') no-repeat center;
          background-size: cover;
        }
        &-2 {
          background: url('~@/assets/images/equ-bg-2.jpg') no-repeat center;
          background-size: cover;
        }
        &-3 {
          background: url('~@/assets/images/equ-bg-3.jpg') no-repeat center;
          background-size: cover;
        }
        &-4 {
          background: url('~@/assets/images/equ-bg-4.jpg') no-repeat center;
          background-size: cover;
        }

        .equ-img {
          // @include addwh(20rem, 40rem);
          width: dpi(20rem);
          margin-top: dpi(4rem);
          display: flex;
          align-items: center;
          transition: all 0.3s linear;
          // opacity: 0.5;
          > img {
            width: 100%;
            // height: 100%;
          }
        }
        .names {
          position: absolute;
          // bottom: 32px;
          bottom: dpi(3rem);
          display: flex;
          flex-direction: column;
          align-items: center;

          .name-cn {
            margin-top: dpi(28rem);
            font-family: PingFangSC-Medium;
            font-size: dpi(2rem);
            letter-spacing: 1px;
            color: #ffffff;
          }
          .name-en {
            font-family: PingFangSC-Medium;
            // font-size: 12px;
            font-size: dpi(2rem);
            letter-spacing: 1px;
            color: #91caff;
            margin-top: 4px;
          }
        }
      }
      &.swiper-slide-active {
        width: dpi(40rem);

        .swiper-slide-card {
          .names {
            display: none;
          }

          .equ-img {
            transform: scale(1.9);
            opacity: 1;
            margin-top: dpi(16rem);
            // margin-top: 120px;
            // padding-top: dpi(4rem);
          }
        }
      }
    }

    // .swiper-button-prev,
    // .swiper-button-next {
    //   top: 168px;
    //   &::after {
    //     font-size: 40px;
    //     color: #05204d;
    //     opacity: 0.3;
    //     font-size: 25px;
    //   }
    // }
    // .swiper-button-prev {
    //   left: -50px;
    // }
    // .swiper-button-next {
    //   right: -50px;
    // }
  }

  // .equ-info {
  //   &-title {
  //     display: flex;
  //     flex-direction: column;
  //     align-items: center;
  //     justify-content: center;
  //     .name-cn {
  //       font-family: PingFangSC-Semibold;
  //       font-size: 30px;
  //       letter-spacing: 2px;
  //       color: #05204d;
  //     }
  //     .name-en {
  //       font-family: PingFangSC-Semibold;
  //       font-size: 18px;
  //       letter-spacing: 0px;
  //       color: #ff0000;
  //       margin-top: 12px;
  //     }
  //   }

  //   &-desc {
  //     font-family: PingFangSC-Regular;
  //     font-size: 15px;
  //     line-height: 30px;
  //     letter-spacing: 1px;
  //     color: #565656;
  //     margin-top: 15px;
  //   }
  //   &-sub {
  //     margin-top: 60px;
  //     display: flex;
  //     justify-content: center;
  //   }
  // }
}

.info-text{
  .title{
    text-align: center;
    margin-top: dpi(6rem);
    margin-bottom: dpi(3rem);
    font-family: PingFangSC-Semibold;
    font-size: dpi(4rem);
    font-weight: normal;
    font-stretch: normal;
    line-height: dpi(4rem);
    letter-spacing: 0rem;
    color: #05204d;
  }
  .highlight{
    margin-bottom: dpi(4rem);
    font-family: PingFangSC-Semibold;
    text-align: center;
    font-size: dpi(2rem);
    font-weight: normal;
    font-stretch: normal;
    line-height: dpi(2rem);
    letter-spacing: 0rem;
    color: #ff0000;
  }
  .desc{
    width: dpi(63rem);
    margin: 0 auto;
    margin-bottom: dpi(4rem);
    font-family: PingFangSC-Regular;
    font-size: dpi(2rem);
    font-weight: normal;
    font-stretch: normal;
    line-height: dpi(4rem);
    letter-spacing: 0rem;
    color: #565656;
  }
  .btn{
    text-align: center;
    margin-top: dpi(4rem);
    margin-bottom: dpi(14rem);
  }
}
</style>
